import React, {useEffect} from "react";
import * as echarts from 'echarts';

interface GridProfitProps {
  chartId: string,
  series: any,
  width?: string | null | undefined | number,
  height?: string | null | undefined | number,
}

const EchartsOne: React.FC<GridProfitProps> = (props) => {

  let renderChart = () => {
    let chartDom = document.getElementById(props.chartId);
    let myChart = echarts.init(chartDom as HTMLElement);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
    myChart.setOption(props.series)
  };

  useEffect(() => {
    if(props.series){
      renderChart();
    }
  },[props.series]);

  return (
    <div id={props.chartId}
         style={{width: props.width ? props.width : '100%', height: props.height ? props.height : 666}}/>
  );
};

export default EchartsOne
